<template>
	<view>
		<!-- 顶部任务状态 -->
		<view class="top_box">
			<view>
				<text>今日佣金</text>
				<text class="text_num1">{{money}}</text>
				<text class="text_num2">/{{maxnum}}</text>
			</view>
			<!-- <view>
				<text>进行中</text>
				<text class="text_num1">1</text>
				<text class="text_num2">/10</text>
			</view> -->
			<view>
				<text>已完成</text>
				<text class="text_num1">{{minnum}}</text>
			</view>
		</view>
		<!-- 任务列表 -->
		<view class="big_box">
			<view class="task_box" v-for="item in list">
				<view class="left">
					<view class="task_name">
						<!-- <view>
							<image style="width: 44rpx;" src="../../static/user/touxiang.png" mode="widthFix"></image>
						</view> -->
						<view class="task_text">{{item.taskName}}</view>
						<view class="task_bi">
							<image style="width: 28rpx;" src="../../static/task/task_bi.png" mode="widthFix"></image>
						</view>
						<view class="task_yun">+{{item.reward}}余额</view>
					</view>
					<!-- <view class="task_time">
						<image style="width: 20rpx;" src="../../static/task/task_time.png" mode="widthFix"></image>
						<text class="time">10:00:00</text>
					</view> -->
				</view>
				<view class="lookad" @click="look(item)" :class="{'style':item.type==1}">浏览广告</view>
			</view>
		</view>
		<!-- 刷新任务 -->
		<!-- <view class="receive">
			<view class="renovate">刷新任务</view>
			<view class="renovate">一键领取</view>
		</view> -->
	</view>
</template>

<script>
	import {task,tasksuccess,uptask} from '../../api/login.js'
	import {tasks} from '../../api/user.js'
	export default{
		data() {
			return {
				num:0,
				list:[],
				minnum:0,
				maxnum:0,
				money:0
			}
		},
		onShow() {
			this.num=0
			this.list=[]
			this.getinfo()
		},
		onReachBottom() {
			this.getinfo()
		},
		methods: {
			// 获取任务
			async getinfo(){
				this.num++;
				let res=await this.get(task,{pageNum:this.num,pageSize:10})
				this.minnum=res.data.taskCount
				this.maxnum=res.data.limitCount
				this.money=res.data.getMoney
				res.data.taskList.list.forEach(item=>{
					item.flag=true
					this.list.push(item)
				})
				console.log(this.list)
			},
			// 完成任务
			async look(item){
				if(item.flag){
					item.flag=false
					if(this.money<this.maxnum){
						let r=await this.get(tasks,{taskId:item.taskId})
						console.log(r)
						if(r.data==true){
							let res=await this.get(tasksuccess,{taskId:item.taskId})
							this.renwu()
							item.flag=true
							uni.navigateTo({
								url:"/pages/index/webView?url="+item.taskUrl
							})
						}else{
							item.flag=true
							this.msg("该任务已完成","none")
						}
					}else{
						this.msg("今日任务已完成","none")
					}
				}else{
					this.msg('请稍后重试','none')
				}
				
			},
			// 刷新任务
			async renwu(){
				let res=await this.get(uptask)
				this.minnum=res.data.taskCount
				this.maxnum=res.data.limitCount
				this.money=res.data.getMoney
			}
		}
	}
</script>

<style scoped>
	.style{
		background-color: #C8C9CC !important;
	}
	.top_box{
		width: 690rpx;
		height: 90rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 0px 20rpx rgba(77, 77, 77, 0.1);
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.text_num1{
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #EA8846;
	}
	.text_num2{
		font-size: 26rpx;
		color: #999999;
	}
	.big_box{
		box-shadow: 0px 0px 20rpx rgba(77, 77, 77, 0.1);
		width: 690rpx;
		margin: 30rpx auto;
		border-radius: 12rpx;
		padding: 0 30rpx 10rpx;
		box-sizing: border-box;
	}
	.task_box{
		width: 630rpx;
		height: 137rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #D7D7D7;
	}
	.task_name{
		display: flex;
		/* align-items: center; */
		
	}
	.left{
		width: 490rpx;
	}
	.lookad{
		width: 140rpx;
		height: 58rpx;
		/* background: linear-gradient(97deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%); */
		background-color:#F18D29 ;
		border-radius: 29rpx;
		text-align: center;
		line-height: 58rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.task_text{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 20rpx;
	}
	.task_bi{
		margin-left: 16rpx;
	}
	.task_yun{
		font-size: 22rpx;
		color: #999999;
	}
	.task_time{
		margin-left: 65rpx;
	}
	.time{
		font-size: 20rpx;
		color: #F0812D;
	}
	.receive{
		width: 500rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 112rpx;
		left: 112rpx;
	}
	.renovate{
		width: 207rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 70rpx;
		text-align: center;
		color: #333333;
	}
</style>
